<template>
  <div class="Login">
    <Form ref="formInline" :model="formInline" v-if="userph==1" :rules="ruleInline" inline :key="1">
      <FormItem prop="phone">
        <Input
          size="large"
          type="text"
          v-model="formInline.phone"
          prefix="ios-call-outline"
          placeholder="手机号码"
          style="width: 270px"
        />
      </FormItem>
      <FormItem prop="password">
        <Input
          prefix="ios-lock-outline"
          class="inp"
          size="large"
          type="password"
          password
          v-model="formInline.password"
          style="width: 270px"
          placeholder="密码"
        />
      </FormItem>
      <br />
      <div class="fle">
        <Button type="default" @click="subOrReg" ghost>{{submim}}</Button>
        <Button type="text" @click="ak" ghost>切换{{msg}}</Button>
      </div>

      <br />
      <FormItem>
        <Button
          type="default"
          @click="phoneLogin('formInline')"
          v-if="subm"
          ghost
          size="large"
          style="width: 270px"
        >登录</Button>
      </FormItem>
    </Form>
    <Form
      ref="formtwInline"
      :model="formtwInline"
      v-else-if="userph==2"
      :rules="ruleInline"
      inline
      :key="2"
    >
      <FormItem prop="email">
        <Input
          type="text"
          size="large"
          v-model="formtwInline.email"
          prefix="ios-mail-outline"
          placeholder="邮箱"
          style="width: 270px"
        />
      </FormItem>
      <FormItem prop="password">
        <Input
          prefix="ios-lock-outline"
          class="inp"
          size="large"
          type="password"
          password
          v-model="formtwInline.password"
          style="width: 270px"
          placeholder="密码"
        />
      </FormItem>
      <br />
      <div class="fle">
        <Button type="default" @click="subOrReg" ghost>{{submim}}</Button>
        <Button type="text" @click="ak" ghost>切换{{msg}}</Button>
      </div>

      <br />

      <FormItem>
        <Button
          type="default"
          @click="emailLogin('formtwInline')"
          v-if="subm"
          ghost
          size="large"
          style="width: 270px"
        >登录</Button>
      </FormItem>
    </Form>
    <Form
      ref="formthInline"
      :model="formthInline"
      v-else-if="userph==3"
      :rules="ruleInline"
      inline
      :key="3"
    >
      <FormItem prop="nickname">
        <Input
          type="text"
          size="large"
          v-model="formthInline.nickname"
          prefix="ios-contact-outline"
          placeholder="昵称"
          style="width: 270px"
        />
      </FormItem>
      <FormItem prop="phone">
        <Input
          type="text"
          size="large"
          v-model="formthInline.phone"
          prefix="ios-call-outline"
          placeholder="手机号"
          style="width: 270px"
        />
      </FormItem>
      <FormItem prop="code">
        <div class="fle">
          <Input
            type="text"
            size="large"
            v-model="formthInline.code"
            prefix="ios-cloud-circle-outline"
            placeholder="验证码"
            style="width: 158px"
            @blur.native.capture="outp('formthInline')"
          />
          <Button
            type="dashed"
            size="large"
            @click="codeaja('formthInline')"
            ghost
            style="width: 112px"
          >获取验证码</Button>
        </div>
      </FormItem>
      <FormItem prop="password">
        <Input
          prefix="ios-lock-outline"
          class="inp"
          size="large"
          type="password"
          password
          v-model="formthInline.password"
          style="width: 270px"
          placeholder="密码"
        />
      </FormItem>
      <br />
      <div class="fle">
        <Button type="default" @click="subOrReg" ghost>{{submim}}</Button>
      </div>

      <br />

      <FormItem>
        <Button
          type="default"
          @click="Register('formthInline')"
          ghost
          size="large"
          style="width: 270px"
        >注册</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userph: 1,
      submim: "立即注册",
      msg: "邮箱登录",
      subm: true,
      loading: false,
      loginDate:true,
      formInline: {
        phone: "",
        password: ""
      },
      formtwInline: {
        email: "",
        password: ""
      },
      formthInline: {
        nickname: "",
        phone: "",
        code: "",
        password: ""
      },
      ruleInline: {
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码不少于六位",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 4,
            message: "请输入正确的验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    phoneLogin(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.formInline.phone);
          console.log(this.formInline.password);

          this.$axios
            .get(this.$URL.BASE_URL + "/login/cellphone", {
              params: {
                phone: this.formInline.phone,
                password: this.formInline.password
              }
            })
            .then(res => {
              if (res.data.code == 502) {
                console.log(res.data.message);
                this.$Message.error(res.data.message + "!");
              } else {
                this.$Message.success(res.data.message + "!");
              }
            })
            .catch(err => {
              console.log(err.message);
            });
        } else {
          this.$Message.error("请完善信息!");
        }
      });
    },

    emailLogin(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$axios
            .get(this.$URL.BASE_URL + "/login", {
              params: {
                email: this.formtwInline.email,
                password: this.formtwInline.password
              }
            })
            .then(res => {
              console.log(res);
              if (res.data.code == 502) {
                this.$Message.error(res.data.message + "!");
              } else {
                this.$Message.success("登录成功!");
                this.$emit('transfer',this.loginDate)
              }
            })
            .catch(err => {
              console.log(err.message);
            });
        } else {
          this.$Message.error("请完善信息!");
        }
      });
    },
    codeaja() {
      console.log(this.formthInline.phone);
      this.$axios
        .get(this.$URL.BASE_URL + "/captcha/sent", {
          params: {
            phone: this.formthInline.phone
          }
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    outp() {
      console.log(this.formthInline.code);
      this.$axios
        .get(this.$URL.BASE_URL + "/captcha/verify", {
          params: {
            phone: this.formthInline.phone,
            captcha: this.formthInline.code
          }
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    Register(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.formthInline.nickname);
          console.log(this.formthInline.phone);
          console.log(this.formthInline.code);
          console.log(this.formthInline.password);
          this.$axios
            .get(this.$URL.BASE_URL + "/register/cellphone", {
              params: JSON.stringify({
                phone: this.formthInline.phone,
                password: this.formthInline.password,
                captcha: this.formthInline.code,
                nickname: this.formthInline.nickname
              })
            })
            .then(res => {
              console.log(res);
            })
            .catch(err => {
              console.log(err.message);
            });
          this.$Message.success("注册成功!已登录");
        } else {
          this.$Message.error("请完善信息!");
        }
      });
    },
    subOrReg() {
      this.userph == 1 || this.userph == 2
        ? (this.userph = 3)
        : (this.userph = 1);
      this.submim == "立即注册"
        ? (this.submim = "返回登录")
        : (this.submim = "立即注册");
    },

    ak() {
      this.userph == 1 || this.userph == 3
        ? (this.userph = 2)
        : (this.userph = 1);
      this.msg == "手机登录"
        ? (this.msg = "邮箱登录")
        : (this.msg = "手机登录");
    }
  }
};
</script>
<style lang='scss' scoped>
.Login {
  margin: 70px auto;
  width: 300px;
  box-shadow: 0 10px 10px black;
  background-color: rgb(46, 47, 51);
  border-radius: 5px;
  padding-top: 40px;
  form {
    width: 270px;
    margin: 0 auto;
    .fle {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
